<template>
    <div class="">
        <div class="top">
            <p>角色管理</p>
            <el-button type="info" @click="myReturn">返回</el-button>
        </div>
        <div class="bottom">
            <div class="title">编辑角色</div>

            <el-form :model="roleForm" :rules="role" ref="roleForm" label-width="100px" class="demo-ruleForm"
                @submit.native.prevent label-position="right">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="roleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="职能描述" prop="responsibility">
                    <el-input type="textarea" v-model="roleForm.responsibility"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch :value="roleForm.statusA == 0" @change="setStart"></el-switch>
                </el-form-item>
                <el-form-item label="菜单权限设置">
                    <el-tree :data="menuListTree" show-checkbox node-key="menuId" :default-expanded-keys="defaultM"
                        :default-checked-keys="defaultM" :props="defaultProps" ref="tree" :check-strictly="isRelevance">
                    </el-tree>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('roleForm')">确认修改</el-button>
                    <el-button @click="resetForm('roleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
    name: 'UpdateRole',
    data() {
        return {
            roleForm: {
                roleId: '',
                roleName: '',
                statusA: 0,
                responsibility: '',
            },
            role: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                responsibility: [
                    { required: true, message: '请填写职能描述', trigger: 'blur' },
                    { min: 0, max: 50, message: '长度在 0 到 50 个字符', trigger: 'blur' }
                ]
            },
            menuListTree: [],
            defaultProps: {
                children: 'menuChilds',
                label: 'menuName',
                id: 'menuId'
            },
            defaultM: [],
            isRelevance: true
        }
    },
    computed: {
        ...mapState(['menuList']),
    },
    mounted() {
        // console.log(this.menuList);
        this.GetMenu().then(res => {
            console.log(res);
            this.menuListTree = res
        })
        // this.isRelevance = true

        // console.log(this.$route.query.roleId);
        let roleId = this.$route.query.roleId;
        this.GetRole(roleId).then(res => {
            console.log(res.data);
            this.roleForm = res.data
            let menuIds = res.data.menuIds ? res.data.menuIds : []
            console.log(menuIds);
            this.defaultM = menuIds
            this.isRelevance = false

            // this.$refs.tree.setExpandedKeys(menuIds)
            // this.menuListTree = res.data.menuIds
        })
    },
    methods: {
        ...mapActions('permission', ['AddRole', 'GetRole', 'UpdateRole', 'GetMenu']),
        getCheckedKeys(a, b) {
            console.log(a, b);
        },
        submitForm(formName) {
            console.log(this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()));

            this.$refs[formName].validate((valid) => {//限制输入值
                console.log(valid);
                if (valid) {//输入值合法
                    let newRole = {};
                    newRole = this.roleForm
                    newRole.menuIds = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
                    console.log(newRole);
                    this.UpdateRole(newRole).then(res => {
                        if (res.code == 200) {
                            this.$router.push({
                                name: 'RoleManage'
                            });
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                        }
                    })
                } else {
                    this.$message.error('请输入正确的信息');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        myReturn() {
            this.$router.push({
                name: 'RoleManage'
            });
        },
        setStart() {
            this.roleForm.statusA = this.roleForm.statusA == 0 ? 1 : 0
        }
    }
}
</script>

<style scoped>
.top {
    background-color: #f0f0f0;
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    padding-right: 50px;
    justify-content: space-between;
}

.top p {
    padding-left: 10px;
    margin-left: 20px;
    border-left: 6px solid #1CB09A;
    height: 26px;
    font-size: 18px;
    font-weight: 400;
}

.top>>>button {
    margin-right: 100px;
}

.bottom {
    width: 700px;
    height: 100%;
    padding: 50px;
    padding-top: 0;
    margin-left: 15%;
    margin-top: 30px;
    border: 2px solid #ccc;
    border-radius: 5px;
}

.title {
    background-color: #f0f0f0;
    display: flex;
    width: calc(100% + 100px) ;
    height: 50px;
    align-items: center;
    padding-right: 80px;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-left: -50px;
    padding-left: 20px;
}
</style>